<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="main">
    <div class="container"></div>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    const con = document.querySelector(".main .container")
    // ajax获取数据
    axios({
      method: "get",
      url: "/api/getAllItems"
    }).then(res => {
      if (res.status === 200 && res.data.length > 0) {
        let domStr = ""
        res.data.forEach(category => {
          domStr = `
            <div class="brick-box">
              <div class="h">
                <h2 class="title">${category.dataValues.name}</h2>
                <div class="more">
                  <a href="/list/${category.dataValues.id}">更多</a>
                </div>
              </div>
              <div class="c clearfix">
                <ul class="list clearfix">
                  ${category.items.map(item => {
            return `<li class="item">
                    <a href="/detail/${item.id}">
                      <div class="figure">
                        <img src="/public/images/${item.cover}" alt="" />
                      </div>
                      <h3 class="title">${item.name}</h3>
                      <p class="desc">${item.description}</p>
                      <p class="price"><span class="num">${item.price}</span>元</p>
                    </a>
                  </li>`
          }).join("")}
                </ul>
              </div>
            </div>`
          con.innerHTML += domStr
        });

      } else {
        con.innerHTML = "出错了！ 暂无数据"
      }

    })

  </script>
</body>

</html>
